<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--demo.css不是必须的-->
		<link rel="stylesheet" href="css/demo.css" />
		<!--核心的样式文件-->
		<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" />
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<!--ztree枋心js文件-->
		<script type="text/javascript" src="js/jquery.ztree.core.js" ></script>
	</head>
	<body>
		<h3>json标准格式的树形结构</h3>
		<ul class="ztree" id="jsonTree">
			
		</ul>
		<h3>使用Array格式（isSampleData简单数据格式）</h3>
		<ul id="sampleTree" class="ztree">
		</ul>
	</body>
	<script>
         var settings={};
		//一、定义节点数据，采用json标准 数据格式,带有父子关系
		var treenodes1 = [{
			name: "root", //当前节点的名称
			open: true, //展开文件夹
			children: //子节点
				[{
				name: "18级软工java班"
			}, {
				name: "18级软工前端班",
				open: true,
				children: [{
					name: "陈钊可"
				}, {
					name: "黄小群"
				}, {
					name: "黄绮婷"
				}]
			}]
		}];//树型菜单初始化
		$.fn.zTree.init($("#jsonTree"),settings,treenodes1);
		  
		  
		  //定义节点数据，采用简单数据格式(Array格式或isSampleData)
		  
		  var simpleNodes=[
		       {id:1,name:"root",open:true,pId:0,
		       iconOpen:"css/zTreeStyle/img/diy/1_open.png",iconClose:"css/zTreeStyle/img/diy/1_close.png"},
		       {id:11,pId:1,name:"java班"},
		       {id:12,pId:1,name:"前端班",iconOpen:"css/zTreeStyle/img/diy/1_open.png",
		       iconClose:"css/zTreeStyle/img/diy/1_close.png"},
		       {id:121,pId:12,name:"陈钊可",icon:"css/zTreeStyle/img/diy/2.png"},
		       {id:122,pId:12,name:"黄小群",icon:"css/zTreeStyle/img/diy/3.png"},
		       {id:123,pId:12,name:"黄绮婷",icon:"css/zTreeStyle/img/diy/4.png"}
		  ];
		  //默认是采用标准数据格式，需要更改设置，改为采用简单数据格式
		  var settins2 = {
		  	view:{
		  		showLine:false,  //去掉节点之间的关联线
		  		selectedMulti: false //禁止选择多个节点
		  		
		  	},
		  	data: {
		  		simpleData: {
		  			enable: true //开启简单数据格式

		  		}
		  	},
		  	callback:{
		  		onClick:show  //绑定show函数
		  	}
		  }
		  //初始化树型菜单
		  $.fn.zTree.init($("#sampleTree"),settins2,simpleNodes);
		  /*
		   * event:事件对象
		   * treeId： 当前树的id属性值
		   * treeNode： 当前树节点,通过当前节点可以获取所有的数据
		   */
		  function show(event,treeId,treeNode){
		  	var id=treeNode.id;  //获取id的值
		  	var pId=treeNode.pId;  //获取pid的值
		  	var name=treeNode.name;  //获取name的值
		  }
	</script>
</html>
